<template>
	<view class="container" v-if="cartList.length>0">
		<view class="carList">
			<view v-for="(item, index) in cartList" :key="index" class="cartItems">
				<image src="../../static/xz2.png" mode="widthFix" 
				style="position: relative;" @click="selself(index)" 
				:class="item.select? 'selActive' : 'selNo'"></image>
				<image :src="item.imgUrl" mode="heightFix"></image>
				<view class="itemMessage">
					<text>{{ item.text }}</text>
					<view class="itemPN">
						<text>￥{{ item.price }}</text>
						<view class="addminus">
							<view class="" @click="minusnum(index)">-</view>
							<view class="nums">{{ item.num }}</view>
							<view class="" @click="addnum(index)">+</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="endBar">
			<view class="endLeft">
				<image src="../../static/xz2.png" mode="widthFix" @click="selectAll" :class="allSelect ? 'selActive' : 'selNo'"></image>
				<text class="qx">全选</text>
				<text class="hj">
					合计:
					<text class="allPrice">￥{{ allMoney }}</text>
				</text>
			</view>
			<view class="endRight">
				<view class="delete">删除</view>
				<view class="buy" @click="goSettle">结算</view>
			</view>
		</view>
	</view>
	<view class="nothing" v-else>
		<image src="https://z3.ax1x.com/2021/04/24/cvuhh6.png" mode="widthFix"></image>
		<text>我的肚子空空如也~</text>
		<text @click="getlistData">填满我吧~</text>
	</view>
</template>

<script>
export default {
	data() {
		return {
			cartList: [],
			
		};
	},
	created() {
	
	},
	computed: {
		allMoney() {
			let money = 0;
			this.cartList.map(item => {
				item.select ? (money += item.price * item.num) : '';
			});
			return money;
		},
		allSelect() {
			return this.cartList.every(item => {
				return item.select;
			});
		},
		
	},
	methods: {
		addnum(index) {
			this.cartList[index].num++;
		},
		minusnum(index) {
			if (this.cartList[index].num < 1) {
				return (this.cartList[index].num = 0);
			} else {
				this.cartList[index].num--;
			}
		},
		selectAll() {
			let flag = !this.allSelect;
			this.cartList.map(item => {
				item.select = flag;
			});
		},
		selself(index) {
			this.cartList[index].select=  !this.cartList[index].select;
			
		},
		getlistData(){
			let that = this;
			this.$http({
				url: '/cart/cartList',
				success(res) {
					res.data.map(item => {
						item.num = 1;
						item.select = false;
					});
					that.cartList = res.data;
				}
			});
		},
		goSettle(){
			uni.navigateTo({
				url:'../settle/settle'
			})
		}
	}
};
</script>

<style scoped>
	
.container {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: #eee;
	/* padding-bottom: 98rpx; */
	box-sizing: border-box;
}

.endBar {
	width: 100%;
	height: 98rpx;
	background-color: #fff;
	display: flex;
	justify-content: space-between;
	
}
/*  #ifdef  H5  */
.endBar{
	position: fixed;
	bottom: 98rpx;
	left: 0
}

/*  #endif  */
.endBar image {
	width: 40rpx;
	position: relative;
}
.endLeft {
	line-height: 98rpx;
	font-size: 24rpx;
}
.endLeft image {
	vertical-align: middle;
	margin: 20rpx;
}
.endLeft .qx {
	margin-right: 20rpx;
}
.endLeft .allPrice {
	color: rgb(255, 121, 0);
}
.endRight {
	display: flex;
	height: 100%;
}
.endRight view {
	width: 98rpx;
	color: #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 24rpx;
}
.endRight .delete {
	background-color: rgb(249, 189, 41);
}
.endRight .buy {
	background-color: rgb(255, 121, 0);
}
.carList {
	width: 100%;
	flex: 1;
	padding: 0 10rpx;
	box-sizing: border-box;
}
.carList .cartItems {
	width: 100%;
	height: 15vh;
	background-color: #fff;
	display: flex;
	align-items: center;
	margin-top: 5rpx;
	padding: 10rpx 0;
}
.carList .cartItems image:nth-of-type(1) {
	width: 40rpx;
	margin: 0 40rpx;
}
.carList .cartItems image:nth-of-type(2) {
	/* width: 40rpx; */
	height: 100%;
	margin-right: 40rpx;
}
.itemMessage {
	flex: 1;
	height: 100%;
	font-size: 28rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}
.itemPN {
	display: flex;
	justify-content: space-between;
	padding-right: 20rpx;
	box-sizing: border-box;
}
.itemPN text:nth-of-type(1) {
	color: rgb(255, 121, 0);
}
.addminus {
	display: flex;
	width: 140rpx;
	border: 2rpx solid #ddd;
	border-radius: 4rpx;
}
.addminus view {
	display: flex;
	align-items: center;
	justify-content: center;
}
.addminus view:nth-child(1) {
	flex: 4;
	border-right: 2rpx solid #ddd;
}
.addminus view:nth-child(2) {
	flex: 6;
}
.addminus view:nth-child(3) {
	border-left: 2rpx solid #ddd;
	flex: 4;
}
.selActive,
.selNO {
	position: relative !important;
}
.selActive::after {
	content: '';
	display: block;
	width: 40rpx;
	height: 40rpx;
	background-color: #fff;
	border: 4rpx solid rgb(255, 121, 0);
	position: absolute;
	left: 0;
	top: 0;
	border-radius: 50%;
	animation: .5s selA;
	box-sizing: border-box;
	transform: scale(0, 0);
}
@keyframes selA {
	from {
		transform: scale(1, 1);
	}
	to {
		transform: scale(0, 0);
	}
}
.selNo::after {
	content: '';
	display: block;
	width: 40rpx;
	height: 40rpx;
	background-color: #fff;
	border: 4rpx solid rgb(255, 121, 0);
	position: absolute;
	left: 0;
	top: 0;
	border-radius: 50%;
	animation: .5s selN;
	box-sizing: border-box;
}
@keyframes selN {
	from {
		transform: scale(0, 0);
	}
	to {
		transform: scale(1, 1);
	}
}
.nothing{
	width: 100vw;
	height: 100vh;
	background-color: rgb(244, 245, 247);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.nothing image{
	width: 30vw;
}
.nothing text:nth-of-type(1){
	font-size: 28rpx
}
.nothing text:nth-of-type(2){
	font-size: 28rpx;
	color: #FFFFFF;
	padding: 10rpx 30rpx;
	background-color: rgb(254, 73, 80);
	border-radius: 40rpx;
	margin-top: 20rpx;
	
}
</style> 
